//路由模块
//1.导入Vue与VueRouter的包
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home.vue';
import Movie from '@/components/Movie.vue';
import About from '@/components/About.vue';

import Tab1 from '@/components/tabs/Tab1.vue';
import Tab2 from '@/components/tabs/Tab2.vue';

import Login from '@/components/Login.vue';
import Main from '@/components/Main.vue';

//2.调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter);

//3.创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用:定义“hash 地址”与“组件”之间的对应关系
  routes: [
    // 重定向路由规则
    { path: '/', redirect: '/home' },
    //路由规则
    { path: '/home', component: Home },
    //动态参数绑定
    // 在movie组件中，希望根据id的值，展示对应电影的详情信息
    // 可以为路由规则开启props 传参,从而方便的拿到动态参数的值
    { path: '/movie/:id', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 子路由规则
        //默认子路由:如果children数组中,某个路由规则的path值为空字符串,则这条路由规则,叫做"默认子路由"
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    { path: '/login', component: Login },
    { path: '/main', component: Main }
  ]
});

//为router 实例对象，声明全局前置导航守卫
//只要发生了路由的跳转必然会触发beforeEach指定的function回调函数
router.beforeEach(function(to, from, next) {
  // to表示将要访问的路由信息
  // from表示将要离开的路由的信息对象
  // next()表示放行
  // 当前用户拥有后台主页的访问权限,直接放行:next()
  // 当前用户没有后台主页的访问权限,强制其跳转到登录页面:next('/login')
  // 当前用户没有后台主页的访问权限 不允许跳转到后台主页:next(false)
  //分析:
  //1. 拿到用户将要访问的hash地址
  // 2.判断hash地址是否等于 /main
  // 2.1 如果等于/main,证明需要登录之后才能访问成功
  // 2.2 如果不等于/main,则不需要登录,直接放行 next()
  // 3.如果访问的地址是/main,则需要读取localStorage中的token值
  // 3.1 如果有token则放行
  // 3.2 如果没有token则强制跳转/login登录页
  if (to.path === '/main') {
    // 要访问后台主页,要判断是否有token
    const token = localStorage.getItem('token');
    if (token) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

//4.向外共享路由的实例对象
export default router;
